<template>
  <div class="home">
    <div class="centered-container">
      <el-container>
        <el-aside class="sidebar scrollable">
          <el-avatar :src="avatar"/>
          <el-card class="skills-card">
            <el-tag v-for="item in pics" :key="item" type="primary" effect="plain" round>
              {{ item }}
            </el-tag>
          </el-card>
<!--          时钟-->
          <div class="clock">
            <h1>当前时间</h1>
            <!-- 添加新类名用于样式控制 -->
            <span class="neon-clock">{{ time }}</span>
          </div>
        </el-aside>
        <el-main class="main-content scrollable">
          <h1>这是 <span class="flowing-gradient">xdAurora</span></h1>
          <SectionTitle title="有些故事不必说给每个人听" :icon="Reading"/>
          <BoxPushingGame/>
          <SectionTitle title="个人" :icon="Connection"/>
          <CardList :items="personalCards"/>
          <SectionTitle title="网站" :icon="User"/>
          <CardList :items="webSiteCards"/>
          <SectionTitle title="项目" :icon="Reading"/>
          <CardList :items="projectCards"/>
          <SectionTitle title="技能" :icon="User"/>
          <el-image :src="getSkillImage" class="skills-container" fit="cover" />
        </el-main>
      </el-container>
      <el-footer>
        <div class="copyright">
          Copyright © 2025 xdAurora
        </div>
      </el-footer>
    </div>
  </div>
  <ThemeToggle/>
</template>

<script setup lang="ts">
import {useDark, useWindowSize} from '@vueuse/core';
import {Connection, Reading, User} from '@element-plus/icons-vue'
import githubIcon from '../assets/github.svg'
import avatar from '../assets/avator.jpg'
import giteeIcon from '../assets/gitee.svg'
import blogIcon from '../assets/blog.svg'
import skillPcLight from '../assets/skills/skillPc-light.svg'
import skillPcDark from '../assets/skills/skillPc-dark.svg'
import skillWapLight from '../assets/skills/skillWap-light.svg'
import skillWapDark from '../assets/skills/skillWap-dark.svg'
import ThemeToggle from '../components/ThemeToggle.vue'
import BoxPushingGame from '../components/PacmanGame.vue'
import CardList from "../components/CardList.vue";
import SectionTitle from "../components/SectionTitle.vue";
import {computed, onMounted, onUnmounted, ref} from "vue";

interface CardItem {
  name: string;
  title: string;
  subtitle: string;
  icon: string;
  action: () => void;
}

const pics = ['网瘾', '乒乓球', '摸鱼', '游戏', '编程', '摄影']

// 获取当前是否为暗黑模式
const isDark = useDark();
// 获取窗口宽度
const {width: windowWidth} = useWindowSize();

const personalCards: CardItem[] = [
  {
    name: 'github',
    title: 'Github',
    subtitle: 'personal github',
    icon: githubIcon,
    action: () => window.open('https://github.com', '_blank')
  },
  {
    name: 'gitee',
    title: 'Gitee',
    subtitle: 'personal gitee',
    icon: giteeIcon,
    action: () => window.open('https://gitee.com', '_blank')
  },
  {
    name: 'gitee',
    title: 'Gitee',
    subtitle: 'personal gitee',
    icon: giteeIcon,
    action: () => window.open('https://gitee.com', '_blank')
  },
]
const webSiteCards: CardItem[] = [
  {
    name: 'blog',
    title: 'Blog',
    subtitle: 'personal blog',
    icon: blogIcon,
    action: () => window.open('https://example.com/blog', '_blank')
  }
]
const projectCards: CardItem[] = [
  {
    name: 'blog',
    title: 'Blog',
    subtitle: 'personal blog',
    icon: blogIcon,
    action: () => window.open('https://example.com/blog', '_blank')
  }
]

const getSkillImage = computed(() => {
  if (windowWidth.value >= 768) {
    return isDark.value ? skillPcDark : skillPcLight;
  }
  return isDark.value ? skillWapDark : skillWapLight;
});
const time = ref('');

// 更新当前时间
const updateTime = () => {
  const now = new Date();
  time.value = now.toLocaleTimeString(); // 格式为hh:mm:ss
};

// 组件挂载后启动定时器
onMounted(() => {
  updateTime();
  const interval = setInterval(updateTime, 1000); // 每秒更新一次时间

  // 清理定时器，防止内存泄漏
  onUnmounted(() => {
    clearInterval(interval);
  });
});
</script>

<style scoped lang="scss">
.clock {
  text-align: center;
  margin-top: 20px;
}

.neon-clock {
  font-size: 28px;
  font-weight: bold;
  // 定义渐变背景
  background: linear-gradient(45deg, #ff00cc, #3333ff, #00ff00, #ff9900);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 400% 400%;
  // 添加跳动动画
  animation: neonGlow 1.5s ease-in-out infinite alternate, heartbeat 1s infinite;
}

// 渐变动画
@keyframes neonGlow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

// 跳动动画
@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
.home {
  position: relative;
  width: 100vw;
  height: 100%;
  overflow: hidden;
}

.home::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url(../assets/background.jpg) no-repeat center center fixed;
  background-size: cover;
  filter: blur(5px);
  z-index: -1;
}

.dark .home::before {
  background: #000000;
}

.centered-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.skills-card {
  width: 100%;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  .el-tag {
    margin: 5px;
  }
}


.copyright {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 5px;
  text-align: center;
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.2);
}

.flowing-gradient {
  font-size: 56px;
  font-weight: bold;
  background: linear-gradient(90deg,
      #fa535a 0%, #f4a88e 20%, #f19074 80%, #9777ea 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 300% 100%;
  animation: flowing 5s ease-in-out infinite;
  position: relative;
}


@keyframes flowing {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}


.sidebar {
  padding: 20px;
  width: 260px;
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;

  .el-avatar {
    width: 200px;
    height: 200px;
  }

}

.main-content {
  flex: 1;
  padding: 20px;
}

//@media (max-width: 768px) {
//  .responsive-container {
//    width: 100%;
//    display: flex;
//    flex-direction: column;
//  }
//
//  .sidebar {
//    width: 100%;
//    margin-top: 0;
//    position: relative;
//  }
//
//
//  .glass-card {
//    width: 100%;
//    margin: 10px 0;
//  }
//
//  .flowing-gradient {
//    font-size: 36px;
//  }
//
//  .centered-container {
//    padding: 20px;
//  }
//
//  .skills-container {
//    max-width: 100%; // 图片最大宽度为容器宽度
//    height: auto; // 保持图片比例
//  }
//}

</style>